<template>
	<view class="news-list">
		<uni-nav-bar :fixed="true" :statusBar="true" :border="false" @clickRight="openAdd">
			<!--左-->
			<block slot="left">
				<view class="nav-left">
					<view class="icon iconfont icon-qiandao"></view>
				</view>
			</block>
			<!--中-->
			<view class="nav-tab-bar u-f-ajc">
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view class="u-f-ajc" :class="{'active':tabIndex==index}" @click="changTab(index)">{{tab.name}}
						<view v-if="(tabIndex==index)" class="nav-tab-bar-line"></view>
					</view>
				</block>
			</view>
			<!--右-->
			<block slot="right">
				<view class="nav-right u-f-ajc">
					<view class="icon iconfont icon-pen"></view>
				</view>
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue'
	
	export default {
		props: {
			tabBars: Array,
			tabIndex: Number
		},
		methods: {
			//导航栏切换
			changTab(index) {
				this.$emit('changTabClick',index)
			},
			//到发布页
			openAdd() {
				uni.navigateTo({
					url: "../add-input/add-input"
				})
			}
		},
		components:{
			uniNavBar
		}
	}
</script>

<style lang="scss" scoped>
	.news-list {

		.nav-left,
		.nav-right {
			view {
				font-size: 40rpx;
			}
		}

		.nav-left {
			margin-left: 16rpx;

			view {
				color: #F0AD4E;
			}
		}

		.nav-right {
			width: 100%;
		}

		.nav-tab-bar {
			position: relative; //相对定位
			width: 100%;
			margin-left: -20rpx;

			view {
				font-size: 30rpx;
				padding: 0 15rpx;
				font-weight: bold;
				color: #969696;

			}

			.active {
				color: #333333 !important;

				.nav-tab-bar-line {
					position: absolute; //绝对定位
					border-bottom: 5rpx solid #FFB400;
					border-top: 5rpx solid #FFB400;
					width: 36rpx;
					border-radius: 40rpx;
					bottom: 0;
				}
			}
		}
	}
</style>
